<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DRAG</title>
<script src="../../s/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
.box {
	display: inline-block;
	margin: 5px;
	width: 100px;
	height: 100px;
	border: 1px solid #ccccff;
	background-color: #ccccff;
	text-align: center;
	line-height: 100px;
}

.bin {
	display: table-cell;
	width: 300px;
	height: 500px;
	margin: 10px;
	border: 1px solid #ccccff;
}

.bin.dragenter {
	background-color: #eeeeff;
}
</style>
</head>
<body>

	<div class="bin">
		<div class="box" draggable="true">1</div>
		<div class="box" draggable="true">2</div>
		<div class="box" draggable="true">3</div>
		<div class="box" draggable="true">4</div>
		<div class="box" draggable="true">5</div>
	</div>

	<script type="text/javascript">
		$('.bin').on({
			selectstart : function() {
				return false;
			},
			dragstart : function(event) {
				var dataTransfer = event.originalEvent.dataTransfer;
				dataTransfer.effectAllowed = 'move';
				var json = JSON.stringify({
					type : 'custom:drag:move',
					html : event.target.outerHTML
				});
				dataTransfer.setData('text', json);
				dataTransfer.setDragImage(event.target, 0, 0);
				return true;
			},
			dragend : function(event) {
				if (top['custom:drag:move:success'] == true) {
					top['custom:drag:move:success'] = null;
					$(this).remove();
				}
				return false
			}
		}, '.box')//
		.on({
			dragover : function() {
				e.preentDefault();
				return true;
			},
			dragenter : function() {
				$(this).addClass('dragenter');
				return true;
			},
			dragover : function() {
				$(this).addClass('dragenter');
				return true;
			},
			dragleave : function() {
				$(this).removeClass('dragenter');
				return true;
			},
			drop : function(event) {
				var dataTransfer = event.originalEvent.dataTransfer;
				var data = null;
				try {
					data = JSON.parse(dataTransfer.getData('text'));
				} catch (e) {
					data = null;
				}
				$(this).removeClass('dragenter');
				if (data && data.type == 'custom:drag:move') {
					$(data.html).appendTo(this);
					top['custom:drag:move:success'] = true;
				}
				return true;
			}
		});//

		$(document.body).on('drop', function(e) {
			e.preventDefault();
			e.stopPropagation();
		});
		//dragstart –> dragenter –> dragover –> drop –> dragend
	</script>
</body>
</html>